import React from 'react'
import '../style.css'
import 'antd/dist/antd.css';
import { Layout, Menu, Breadcrumb } from 'antd';
import { HashRouter, Link, Route, Switch } from 'react-router-dom'
import UserList from '../components/UserList'
import ShoppingList from '../components/ShoppingList'
import {
    DesktopOutlined,
    PieChartOutlined,
    FileOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';


const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;



class Home extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            collapsed: false,
        }
    }

    onCollapse = collapsed => {
        console.log(collapsed);
        this.setState({ collapsed });
    };

    render() {
        return (
            <HashRouter>

                <div className="home_container">
                    <Layout style={{ minHeight: '100vh' }}>
                        <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
                            <div className="logo" />
                            <Menu theme="dark" defaultSelectedKeys={['0']} mode="inline">
                                <Menu.Item key="1" icon={<PieChartOutlined />}>
                                    首页
                      </Menu.Item>
                                <Menu.Item key="2" icon={<DesktopOutlined />}>
                                    说明
                      </Menu.Item>
                                <SubMenu key="sub1" icon={<UserOutlined />} title="数据管理">
                                    <Menu.Item key="3" onClick={() => {
                                        // this.props.history.push('/userlist')
                                    }}>
                                        <Link to="/userlist">
                                            用户列表
                                        </Link>
                                    </Menu.Item>
                                    <Menu.Item key="4" onClick={() => {
                                        // this.props.history.push('/')
                                    }}>
                                        <Link to="/">
                                            商品列表
                                    </Link>
                                    </Menu.Item>
                                    <Menu.Item key="5" >
                                        食品列表
                                    </Menu.Item>

                                </SubMenu>
                                <SubMenu key="sub2" icon={<TeamOutlined />} title="添加数据">
                                    <Menu.Item key="6">Team 1</Menu.Item>
                                    <Menu.Item key="8">Team 2</Menu.Item>
                                </SubMenu>
                                <Menu.Item key="9" icon={<FileOutlined />} >图表
                      </Menu.Item>
                            </Menu>
                        </Sider>
                        <Layout className="site-layout">
                            <Header className="site-layout-background" style={{ padding: 0, background: '#fff' }} >
                                <Breadcrumb style={{ margin: '16px 50px' }}>
                                    <Breadcrumb.Item>首页</Breadcrumb.Item>
                                    <Breadcrumb.Item>数据管理</Breadcrumb.Item>
                                    <Breadcrumb.Item>商品列表</Breadcrumb.Item>

                                </Breadcrumb>
                            </Header>
                            <Content style={{ margin: '0 16px' }}>

                                <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
                                    <Switch>
                                        <Route path="/userlist" component={UserList} />
                                        <Route path="/" component={ShoppingList} />
                                    </Switch>
                                </div>
                            </Content>
                        </Layout>
                    </Layout>
                </div>
            </HashRouter>

        )
    }

}

export default Home